<template>
  <!--文件管理-文件目录设置-本部门授权弹窗和表单-->
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="650"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto; padding-bottom: 53px"
  >

    <div style="border: 1px solid #f1f1f1; padding: 5px" v-for="(item, index) in treeData" :key="index">
      {{ item.realname }}
      <a-checkbox-group  :options="options" style="display: block" @change="(c) => {onChange(c,item.id)}"  :value="quanxianValue(item.id)">
      </a-checkbox-group>
    </div>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: 0.8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem"
        >仅保存</a-button
      >
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
    </div>

    <!-- <role-datarule-modal ref="datarule"></role-datarule-modal> -->
  </a-drawer>
</template>
<script>
import {
  queryUserTreeList,
  queryUserOtherTreeList,
  queryPermissionTreeList,
  submitPermission,
  queryTreeListForRole,
  queryRolePermission,
  saveRolePermission,
} from '@/api/api'
import { getAction } from '../../../../api/manage'
// import RoleDataruleModal from './RoleDataruleModal.vue'
const options = [
  { label: '查看', value: '0' },
  { label: '添加/修改', value: '1' },
]
export default {
  name: 'RoleModal',
  components: {
    // RoleDataruleModal
  },
  props: {
    dataInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },

  data() {
    return {
      dataInfo1: [],
      roleId: '',
      id: '',
      userids: '',
      type: '',
      Userids:'',
      treeData: [],
      quanxian: [],
      checkboxChecked: [],
      defaultCheckedKeys: [],
      checkedKeys: [],
      options,
      types:[],
      valueList:[],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: true,
      title: '部门权限配置',
      visible: false,
      loading: false,
      selectedKeys: [],
    }
  },
  mounted() {
    // console.log('接收111：', this.dataInfo)
    // this.id=this.dataInfo.id
    // this.loadData(this.dataInfo.id)
    // console.log('gsd',this.dataInfo.id);

  },
  created(){
    //this.loadData(this.id)
  },
  methods: {
    loadData(id) {
      queryUserTreeList().then((res) => {
        if(res.success){
          let treeData = res.result;
          getAction(`/system/sysOrgFile/querySysUserFileById?id=${id}`).then((res1) => {
            if(res1.success){
              this.treeData = treeData;
              this.quanxian = res1.result;
              this.$forceUpdate();
            }
          })
        }
      })
    },
    quanxianValue(userId) {
      const q = this.quanxian[userId]
      // console.log('b',this.quanxian);
      // console.log('dsb', q)
      if (q == "0") {
        // 查看
        return ["0"]
      }
      if (q == "1") {
        //查看  添加/修改
        return ["0", "1"]
      }

      if (q == "2") {
        return []
      }
      return []
    },
    onChange(checkedValues, uId) {
      if (checkedValues.length <= 0){
        // console.log('fsd1',this.quanxian);
        this.quanxian = {
          ...this.quanxian,
          [uId]: '2'
        }
        return
      }
      if (checkedValues.length == 1){
        // console.log('fsd2',this.quanxian);
        this.quanxian = {
          ...this.quanxian,
          [uId]: '0'
        }
        return
      }
      if (checkedValues.length >= 2){
        // console.log('fsd2',this.quanxian);
        this.quanxian = {
          ...this.quanxian,
          [uId]: '1'
        }
        return
      }

      if (checkedValues[0] == '1'){
        // console.log('fsd3',this.quanxian);
        this.quanxian = {
          ...this.quanxian,
          [uId]: '1'
        }
        return
      }

      if (checkedValues[0] == '0'){
        // console.log('fsd4',this.quanxian);
        this.quanxian = {
          ...this.quanxian,
          [uId]: '0'
        }
        return
      }


    },
    onTreeNodeSelect(id) {
      if (id && id.length > 0) {
        this.selectedKeys = id
      }
      // this.$refs.datarule.show(this.selectedKeys[0],this.roleId)
    },
    onCheck(o) {
      if (this.checkStrictly) {
        this.checkedKeys = o.checked
      } else {
        this.checkedKeys = o
      }
    },
    show(dataInfo) {
      this.visible = true
      this.dataInfo1=dataInfo

      this.id = dataInfo.id
      this.loadData(this.id)
    },
    close() {
      this.reset()
      this.$emit('close')
      this.visible = false
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys
      this.autoExpandParent = false
    },
    reset() {
      this.expandedKeysss = []
      this.checkedKeys = []
      this.defaultCheckedKeys = []
      this.loading = false
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys
    },
    closeAll() {
      this.expandedKeysss = []
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL() {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = []
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false
      } else if (v == 2) {
        this.checkStrictly = true
      }
    },
    handleCancel() {
      this.close()
    },
    handleSubmit(exit) {
      // if (!this.dataruleChecked || this.dataruleChecked.length == 0) {
      //   this.$message.warning('请注意，现未勾选任何人员!')
      // }
      let that = this
      let u0 = []
      let u1 = []
      let u2 = []

      this.treeData.map((item) => {
        if(this.quanxian[item.id] == 0){
          u0.push(item.id)
          return
        }

        if(this.quanxian[item.id] == 1){
          u1.push(item.id)
          return
        }

        if(this.quanxian[item.id] == 2){
          u2.push(item.id)
          return
        }
        u2.push(item.id)
      })

      let postData = [{
        userids: u0.join(','),
        type: 0,
        id: this.id,
      },{
        userids: u1.join(','),
        type: 1,
        id: this.id,
      },{
        userids: u2.join(','),
        type: 2,
        id: this.id,
      }]
      that.loading = true
      submitPermission(postData).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loading = false
          if (exit) {
            that.close()
          }
        } else {
          that.$message.error(res.message)
          that.loading = false
          if (exit) {
            that.close()
          }
        }
        this.loadData()
      })
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        //this.loadData()
      }
    },
  },
}
</script>
<style lang="less" scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>